<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>Data里面的日期{{data_date}}</h1>
      <h1>计算属性里面的日期{{computed_date}}</h1>
      <h1>{{ new_date_func()1}}</h1>
      <h1>{{reversedMessage}}</h1>
      <button @click="changeMessage">改变消息</button>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        data_date: Date.now(), // 初始化之后 数据不会变了
        message: "Hello",
        new_date_func:function(){
            return Date.now();
        }
      },
      // computed 计算属性
      computed: {
        // 每次获取的时候 只要里面依赖的数据发生变化 数据发生变化
        computed_date: function () {
          return Date.now();
        },
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split("").reverse().join("");
        },
      },
      methods: {
        changeMessage:function(){
            this.message = "bu hello";
        }
      },
    });
  </script>
</html>
